import React from 'react';
import { Link } from 'dw-mx-router';
import ProLayout from 'dw-mx-layout-antdpro';
import GlobalHeader from '../components/GlobalHeader';
import './style/index.less';
import PageHeader from '@/layouts/PageHeader';
import { useLocation } from 'dw-mx-router';
import { SewLaneContainer } from 'dw-mx-sew-plugin-sefdsu';
import './style/index.less';
import LogoArea from "@/components/LogoArea/LogoArea";
import {Modal} from "dw-mx";
import {Input} from "antd";
import {ColFlex, FlexItem} from "dw-mx-flex";
import NavArea from "@/components/NavArea/NavArea";

export interface BasicLayoutProps {
    logo: any;
    route: any;
    menuTheme: 'light' | 'dark';
    title: string;
}

const BasicLayout: React.FunctionComponent<BasicLayoutProps> = (props) => {
    const { children, route, logo, menuTheme, title } = props;
    const location = useLocation();
    return (
        <div style={{height:'100%',overflow:'hidden'}}>
            <div className={'dw-mx-layout-seflike'}>
                <ColFlex>
                    <FlexItem flexBasic={50}>
                        <div className={'dw-mx-layout-seflike-header'}>
                            <div className={'dw-mx-layout-seflike-header-bg'}>
                                <LogoArea logo={logo} title={title}/>
                                <NavArea route={route}/>
                                <GlobalHeader/>
                            </div>
                        </div>
                    </FlexItem>
                    <FlexItem>
                        <div style={{height: '100%'}}>
                            {children}
                        </div>
                    </FlexItem>
                </ColFlex>
            </div>
        </div>
    );
};

export default BasicLayout;
